<template>
  <div class="page-center">
    <div class="avatar" v-if="userInfo">
      <img :src="userInfo.avatar" class="avator-icon" />
      <div class="nick-name">{{ userInfo.username }}</div>
    </div>

    <div class="avatar" v-else>
      <img src="../../assets/images/avatar.png" class="avator-icon" />
      <router-link class="nick-name" to="/login">立即登录</router-link>
    </div>

    <ul class="my-order-tab">
      <li>
        <i class="iconfont icon-youhui"></i>
        <div class="common-p">电影订单</div>
      </li>
      <li>
        <i class="iconfont icon-linggan"></i>
        <div class="common-p">拼团订单</div>
      </li>
    </ul>

    <router-link class="margin-set my-card" to="/user/card">
      <span class="label">卖座卡</span>
    </router-link>
    <router-link class="margin-set my-balance" to="/user/balance">
      <span class="label">余额</span>
    </router-link>
    <div class="margin-set system-set">
      <span class="label">设置</span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'Center',

  computed: {
    ...mapState(['userInfo'])
  },

  methods: {
    ...mapMutations(['SET_TITLE'])
  },

  created () {
    this.SET_TITLE('个人中心')
  }
}
</script>

<style lang="scss">
@import '~@/assets/styles/mixins.scss';
.page-center {
  .avatar {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.6837f67.png);
    background-size: cover;
    display: flex;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
    .avator-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 16px;
    }
  }
  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    align-items: center;
    li {
      position: relative;
      flex: 1;
      list-style: none;
      .iconfont {
        font-size: 26px;
      }
      .common-p {
        margin-top: 10px;
        color: #797d82;
      }
    }
  }
  .margin-set {
    @include border-bottom;
    background: #fff;
    padding: 0 15px;
    height: 49px;
    display: flex;
    align-items: center;
    .label {
      margin-left: 15px;
      color: #191a1b;
      flex: 1;
    }
  }
}
</style>
